<template>
    <div class="myPublic-wrapper">
        <IHeader class="header" back="true" title="我的发布" :manage="!editing" :finish="editing" @manage="handleManage" @finish="handleFinish"></IHeader>
        <div class="tab-wrapper border-bottom-ebebeb">
            <div class="tab-item-wrapper" :class="[index === 0 ? 'first-child' : '']" v-for="(item, index) in tabList" :key="index" @click="handleChooseType(index)">
                <text class="tab-item" :class="[typeIndex === index ? 'choose' : 'unchoose']">{{item.name}}</text>
            </div>
        </div>
        <list class="itemList" :class="[editing ? 'padding_bottom_90' : '']" @loadmore="loadMore" v-if="itemList.length > 0" loadmoreoffset="50">
            <cell class="itemCell flex_row border-bottom-ebebeb" v-for="(item, index) in itemList" :key="index" @click="handleCheckDetail(item, index)">
                <Check class="margin_right_70" :show="editing" :checked="deleteList[index].checked || clearAll"></Check>
                <div class="manage-content flex_row">
                    <image class="itemIcon" :src="imgPath(iconList[Number(item.serviceType) - 1])"></image>
                    <div class="item-content">
                        <div class="title-wrapper flex_row">
                            <text class="title">{{typeIndex === 0 ? item.platformServiceDTO.title : '订单编号：' + item.masterServiceDTO.orderNo}}</text>
                            <text class="type" v-if="!editing">{{handleFilterType(item.serviceType)}}</text>
                        </div>
                        <div class="item-center flex_row">
                            <div class="description-wrapper">
                                <text class="description">描述信息</text>
                                <text class="description" v-if="typeIndex === 0 && item.platformServiceDTO.descriptionInformation && item.platformServiceDTO.descriptionInformation.length > 0">{{item.platformServiceDTO.descriptionInformation}}</text>
                                <text class="description" v-if="typeIndex === 1 && item.masterServiceDTO.describtion && item.masterServiceDTO.describtion.length > 0">{{item.masterServiceDTO.describtion}}</text>
                            </div>
                            <div class="status-wrapper" v-if="!editing">
                                <text class="cost text_right" v-if="typeIndex === 1">{{item.masterServiceDTO.cost ? ('￥' + item.masterServiceDTO.cost + '元') : '费用'}}</text>
                                <text class="chating text_right col_64c56b" v-if="typeIndex === 1">{{item.masterServiceDTO.cost ? '商议' : '泳衣库核价中'}}</text>
                                <text class="status text_right" :class="[(item.taskStatus === '1' || item.taskStatus === '6') ? 'col_ff0f37' : 'col_64c56b']">{{statusList[Number(item.taskStatus) - 1]}}</text>
                                <text class="time text_right" v-if="typeIndex === 0 && item.taskValidity && (item.taskStatus === '1' || item.taskStatus === '3')">{{filterTime(item.taskValidity)}}</text>
                                <text class="time text_right" v-if="typeIndex === 1 && item.taskValidity && (item.taskStatus === '1' || item.taskStatus === '3')">{{filterTime(item.taskValidity)}}</text>
                                <text class="time text_right" v-if="item.taskStatus === '6'">点击重新发布</text>
                            </div>
                        </div>
                        <div v-if="typeIndex === 0 && item.platformServiceDTO.type" class="tag-wrapper flex_row border-bottom-ebebeb">
                            <text class="tag" v-for="(items, indexs) in item.platformServiceDTO.type.split('、')" :key="indexs">{{items}}</text>
                        </div>
                        <div v-if="typeIndex === 1 && item.masterServiceDTO.style" class="tag-wrapper flex_row border-bottom-ebebeb">
                            <text class="tag" v-for="(items, indexs) in item.masterServiceDTO.style.split('、')" :key="indexs">{{items}}</text>
                        </div>
                        <div class="date-wrapper flex_row">
                            <text class="date">{{item.createTime}}发布</text>
                            <div class="btn-wrapper flex_row" v-if="!editing">
                                <text class="btn btn-white" v-if="item.taskStatus === '1' || item.taskStatus === '6'" @click="revokeTask(item, index)">撤销</text>
                                <!--<text class="btn btn-white" v-if="item.taskStatus === '2'">开始任务</text>-->
                                <!--<text class="btn margin_left_16 btn-black" v-if="item.taskStatus === '1'">去修改</text>-->
                                <text class="btn margin_left_16 btn-black" v-if="item.taskStatus === '2' || item.taskStatus === '3'">去沟通</text>
                                <text class="btn margin_left_16 btn-black" v-if="item.taskStatus === '5'" @click="deleteTask(item, index)">删除任务</text>
                                <text class="btn margin_left_16 btn-black" v-if="item.taskStatus === '1' || item.taskStatus === '6'" @click="rePublish(item)">重新发布</text>
                            </div>
                        </div>
                    </div>
                </div>
            </cell>
        </list>
        <div class="clear-wrapper flex_row" v-if="editing" >
            <div class="flex_row align_center" @click="seleceAll">
                <Check class="margin_right_24" :show="editing" :checked="clearAll" @doclick="seleceAll"></Check>
                <text class="col_464646 fs_28">全选</text>
            </div>
            <text class="delete" @click="deleteData">删除</text>
        </div>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import Check from '@/components/check'
import { WxcLoading } from 'weex-ui'
import { queryDist } from '@/api/common'
import { getLookingList, getWorkshopList, deleteMyPublish, deleteMyPublishSingle, cancelMyPublish } from '@/api/market'
const modal = weex.requireModule('modal')

export default {
  name: 'myPublic',
  data () {
    return {
      loadingShow: false, // loading
      needMask: true,
      tabList: [
        {
          type: 0,
          name: '平台求购'
        },
        {
          type: 1,
          name: '大师工坊'
        }
      ], // 类型列表
      typeIndex: 0, // 类型下标
      pageNo: 1,
      pageSize: 10,
      editing: false, // 编辑中
      statusList: ['未接单', '已接单', '任务中', '待收货', '已完成', '已过期', '任务超期'], // 状态列表
      typeList: [], // 类型列表
      iconList: ['designer.png', 'printer.png', '', '', '', '', 'sam_garm_worker.png', 'fabric_dealer.png', 'excipient_dealer.png', 'swimsuit_factory.png', 'find_order.png', 'master.png'], // icon列表
      deleteList: [], // 存储删除下标
      hasMore: true, // 是否还有数据
      clearAll: false, // 全选
      itemList: [] // 平台求购列表
    }
  },
  watch: {
    itemList (newValue) {
      const that = this
      that.deleteList = []
      for (let i = 0; i < newValue.length; i++) {
        let obj = {
          checked: false
        }
        that.deleteList.push(obj)
      }
    },
    deleteList: {
      handler (newValue) {
        const that = this
        let count = 0
        newValue.forEach((item) => {
          if (!item.checked) {
            count++
          }
        })
        if (count > 0) {
          that.clearAll = false
          return
        }
        that.clearAll = true
      },
      deep: true
    }
  },
  mounted () {
    const that = this
    that.loadingShow = true
    that.$api.get(queryDist + 'service_type', {}, (result) => {
      that.loadingShow = false
      that.typeList = result.data
      that.getDataList()
    })
  },
  methods: {
    handleChooseType (inx) { // 类型切换
      if (this.typeIndex === inx) {
        return
      }
      this.typeIndex = inx
      this.hasMore = true
      this.pageNo = 1
      this.itemList = []
      this.getDataList()
    },
    getDataList () { // 数据加载
      const that = this
      let path = that.typeIndex === 0 ? getLookingList : getWorkshopList
      let params = {
        pageNo: that.pageNo,
        pageSize: that.pageSize
      }
      that.loadingShow = true
      that.$api.get(path, params, (res) => {
        that.loadingShow = false
        if (res.data.records.length <= 0) {
          that.hasMore = false
          modal.toast({
            message: '没有数据了~'
          })
          return
        }
        that.itemList = that.itemList.concat(res.data.records)
      }, () => {
        that.loadingShow = false
      }, true)
    },
    loadMore () {
      const that = this
      if (!that.hasMore) {
        return
      }
      that.pageNo++
      that.getDataList()
    },
    seleceAll () { // 全选
      const that = this
      that.checkAll = !that.checkAll
      that.deleteList.forEach((item) => {
        item.checked = that.checkAll
      })
    },
    deleteTask (item, inx) { // 删除任务
      const that = this
      that.$api.post(deleteMyPublishSingle + '?id=' + item.id, {}, () => {
        that.itemList.splice(inx, 1)
      })
    },
    revokeTask (item, inx) { // 撤销
      const that = this
      // let params = {
      //   id: item.id
      // }
      // modal.toast({
      //   message: JSON.stringify(params)
      // })
      that.$api.post(cancelMyPublish + '?id=' + item.id, {}, () => {
        that.itemList.splice(inx, 1)
      })
    },
    deleteData () { // 删除
      const that = this
      if (that.itemList.length <= 0) {
        return
      }
      let params = []
      if (!that.clearAll) {
        that.deleteList.forEach((item, index) => {
          if (item.checked) {
            params.push(that.itemList[index].id)
          }
        })
        if (params.length <= 0) {
          return
        }
      }
      modal.confirm({
        message: '确定删除？',
        okTitle: '确定',
        cancelTitle: '取消'
      }, function (value) {
        if (value === '确定') {
          that.loadingShow = true
          that.$api.post(deleteMyPublish, params, () => {
            that.loadingShow = false
            modal.toast({
              message: '删除成功',
              duration: 0.8
            })
            that.itemList = []
            that.getDataList()
            that.editing = false
          }, () => {
            that.loadingShow = false
          }, true)
        }
      })
    },
    rePublish (item) { // 重新发布
      const that = this
      let path = ''
      if (item.serviceType === '1') {
        path = '/market/design'
      } else if (item.serviceType === '2') {
        path = '/market/edition'
      } else if (item.serviceType === '7') {
        path = '/market/proof'
      } else if (item.serviceType === '8') {
        path = '/market/material'
      } else if (item.serviceType === '9') {
        path = '/market/accessories'
      } else if (item.serviceType === '10') {
        path = '/market/factory'
      } else if (item.serviceType === '11') {
        path = '/market/order'
      } else if (item.serviceType === '12') {
        path = '/market/master'
      }
      that.$router.push({
        path: path,
        query: {
          id: item.id,
          extId: item.extId
        }
      })
    },
    handleManage () { // 管理
      const that = this
      that.editing = true
    },
    handleFinish () { // 完成
      const that = this
      that.editing = false
    },
    handleFilterType (type) { // 类型格式化
      const that = this
      let str = ''
      that.typeList.forEach((item) => {
        if (item.value === type) {
          str = item.description
        }
      })
      return str
    },
    handleCheckDetail (item, inx) { // 发布详情
      const that = this
      if (that.editing) {
        that.deleteList[inx].checked = !that.deleteList[inx].checked
      } else {
        that.$router.push({
          path: '/market/publishDetail',
          query: {
            id: item.id,
            type: that.typeIndex,
            serviceType: item.serviceType
          }
        })
      }
    }
  },
  components: {
    IHeader,
    Check,
    WxcLoading
  }
}
</script>

<style scoped>
    .myPublic-wrapper {
        background-color: #f5f5f5;
    }
    .flex_row {
        flex-direction: row;
    }
    .text_right {
        width: 200px;
        text-align: right;
    }
    .border-bottom-ebebeb {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb;
    }
    .tab-wrapper {
        margin-top: 88px;
        flex-direction: row;
        background-color: #fff;
    }
    .tab-item-wrapper {
        flex: 1;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .tab-item {
        line-height: 48px;
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 28px;
        font-weight: bold;
        box-sizing: content-box;
    }
    .first-child {
        border-right-width: 2px;
        border-right-style: solid;
        border-right-color: #ebebeb;
    }
    .unchoose {
        color: #868686;
        border-bottom-width: 0;
    }
    .choose {
        color: #fecb01;
        border-bottom-width: 4px;
        border-bottom-style: solid;
        border-bottom-color: #fecb01;
    }
    .itemList {
        min-height: 500px;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #ebebeb;
        background-color: #fff;
    }
    .padding_bottom_90 {
        padding-bottom: 90px;
    }
    .itemCell {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 24px;
        padding-bottom: 24px;
        align-items: center;
        justify-content: space-between;
    }
    .itemIcon {
        width: 66px;
        height: 66px;
        margin-right: 24px;
    }
    .item-content {
        flex: 1;
    }
    .title-wrapper {
        justify-content: space-between;
        align-items: center;
    }
    .title {
        width: 410px;
        lines: 1;
        color: #464646;
        font-size: 28px;
    }
    .type {
        color: #cecece;
        font-size: 24px;
    }
    .col_64c56b {
        color: #64c56b;
    }
    .col_ff0f37 {
        color: #ff0f37;
    }
    .item-center {
        justify-content: flex-end;
    }
    .description-wrapper {
        flex: 1;
        margin-top: 16px;
        flex-wrap: wrap;
    }
    .description {
        /*width: 400px;*/
        lines: 2;
        color: #868686;
        font-size: 26px;
        line-height: 36px;
    }
    .status-wrapper {
        padding-top: 24px;
    }
    .status {
        font-size: 28px;
        color: #64C56B;
        text-align: right;
    }
    .time {
        margin-top: 12px;
        color: #ff0f37;
        font-size: 24px;
        text-align: right;
    }
    .tag-wrapper {
        width: 520px;
        margin-top: 24px;
        flex-wrap: wrap;
    }
    .tag {
        height: 36px;
        margin-right: 16px;
        margin-bottom: 16px;
        padding-left: 16px;
        padding-right: 16px;
        border-width: 1px;
        border-style: solid;
        border-color: #2b3040;
        color: #2b3040;
        font-size: 24px;
        line-height: 36px;
        border-radius: 10px;
    }
    .date-wrapper {
        margin-top: 24px;
        align-items: center;
        justify-content: space-between;
    }
    .date {
        color: #cecece;
        font-size: 24px;
        line-height: 40px;
    }
    .btn {
        width: 116px;
        height: 48px;
        font-size: 24px;
        line-height: 48px;
        text-align: center;
        border-radius: 10px;
    }
    .btn-white {
        color: #2b3040;
        border-width: 1px;
        border-style: solid;
        border-color: #2b3040;
    }
    .btn-black {
        color: #fff;
        border-width: 0px;
        background-color: #2b3040;
    }
    .margin_left_16 {
        margin-left: 16px;
    }
    .manage {
        width: 42px;
        height: 42px;
        margin-right: 72px;
    }
    .manage-content {
        flex: 1;
    }
    .clear-wrapper {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 20px;
        padding-bottom: 20px;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #ebebeb;
        background-color: #fff;
        justify-content: space-between;
    }
    .delete {
        width: 176px;
        height: 60px;
        line-height: 60px;
        font-size: 26px;
        text-align: center;
        border-radius: 10px;
        color: #fff;
        background-color: #2b3040;
    }
    .margin_right_70 {
        margin-right: 70px;
    }
    .margin_right_24 {
        margin-right: 24px;
    }
    .cost {
        font-size: 32px;
        font-weight: bold;
        color: #fecb01;
    }
    .chating {
        margin-top: 8px;
        margin-bottom: 16px;
        font-size: 22px;
    }
</style>
